<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String skin = (String) session.getAttribute("USERSKIN_SESSION");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <!-- 卷/件管理 -->
    <title>山西省审计厅档案综合管理系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <jsp:include page="/inc/head.jsp" flush="true"/>
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="${basePath}/assets/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
</head>
<style>
    .table_count{
        margin-left:5px;
        margin-top:5px;
        text-align:center;
        font-size:12px;
        float: left;
    }
    .table_count td {
        border: 1px solid #7F9DB9;
    }
    td {
        width: 70px;
        height: 30px;
    }
    .fixed-table-toolbar .columns {
        top:-10px;
        margin: 0;
    }
    .bootstrap-table {
        margin-top: -20px;
    }
    #formSearch .form-group input {
        height: 28px;
        border:1px solid #ccc;
        border-radius:3px;
    }
    #formSearch .form-group label {
        text-align: right;
        padding-right: 0;
    }
</style>
<body style="overflow:hidden;">
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:0px">
                    <label class="control-label col-sm-1" for="yearCountStart">年度</label>
                    <div class="col-sm-5">
                        <input type="text" id="yearCountStart" class="input-medium search-query" style="width: 120px"  readonly >
                        --
                        <input type="text" id="yearCountEnd" class="input-medium search-query" style="width: 120px"  readonly>
                    </div>
                    <div class="col-sm-3" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" onclick="queryParamsCount()" class="btn btn-primary">查询</button>
                        <button type="button" style="margin-left:50px" id="btn_clean" onclick="queryParamsCountClean()" class="btn btn-primary">重置</button>

                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="userTablebar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" onclick="showDataTable()">
            <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>数据列表
        </button>
        <button id="btn_change" type="button" class="btn btn-default" onclick="proporChange()">
            <span class="glyphicon glyphicon-road" aria-hidden="true"></span>占比图形
        </button>
    </div>
    <div id="showDataCountYear">
        <table id="tableCount"></table>
    </div>
    <div id="showProporCountYear" style="display: none;">
        <!-- 柱状统计图 -->
        <div id="proporChartVolYearCount" style="height:500px ;width:50%;float:left;"></div>
        <div id="proporChartItemYearCount" style="height:500px ;width:50%;float:right;"></div>
    </div>
</div>
<input type="hidden" id="switch" name="switch" value="0">
<jsp:include page="/inc/footer.jsp" flush="true"/>
<!-- bootstrap datepicker -->
<script src="${basePath}/assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="${basePath}/assets/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="${basePath}/assets/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="${basePath}/js/echarts.js"></script>
</section>
<script>
    var $table = $('#tableCount');
    $(function(){
        bootStrapDate('yearCountStart');
        bootStrapDate('yearCountEnd');
      //  bootstraptableCountAction();
        getColumnsAction();
    });
    //显示数据列表
    function showDataTable() {
        $("#showDataCountYear").show();
        $("#showProporCountYear").hide();
        $("#switch").val("0");
    }
    //显示占比图形
    function proporChange(){
        $("#showDataCountYear").hide();
        $("#showProporCountYear").show();
        $("#switch").val("1");
        echartsData();
    }

    //BootStrap日期
    function bootStrapDate(id){
        var idr="#"+id;
        $(idr).datepicker({
            startView: 2,
            maxViewMode: 2,
            minViewMode:2,
            autoclose: true,
            language: 'zh-CN',//显示中文
            format: 'yyyy',//显示格式
            locale: moment.locale('zh-cn'),
            endDate: new Date()
        });
    }

    //清空查询条件
    function queryParamsCountClean(){
        $("#yearCountStart").val("");
        $("#yearCountEnd").val("");
    }

    //获取columns
    function getColumnsAction(){
        $.ajax({
            type: "POST",
            url:"${basePath}/pcwindow/findAllJudType",
            dataType:"json",
            async:false,
            success: function(data){
                var columns=[];
                if (data.length != 0) {
                    var arcTypes = data.rows;
                    var data2=[
                        {
                            title:'年度',
                            field: 'year',
                            align: 'center',
                            valign: 'middle',
                            colspan: 1,
                            rowspan: 2
                        },{
                            title:'总量',
                            field: '',
                            align: 'center',
                            valign: 'middle',
                            colspan: 2,
                            rowspan: 1
                        }
                    ];
                    var data3=[
                        {field: 'totalVol', align: 'center',title: '总卷数'},
                        {field: 'totalItem', align: 'center',title: '总件数'}
                    ]
                    for(var i = 0;i < arcTypes.length ;i++){
                        var tyname=arcTypes[i].sortName;
                        var tyid=arcTypes[i].sortNum;
                        var dataTop={};
                        dataTop['title']=tyname;
                        dataTop['field']='';
                        dataTop['align']='center';
                        dataTop['valign']='middle';
                        dataTop['colspan']=2;
                        dataTop['rowspan']=1;
                        data2.push(dataTop);
                        var dataUnder={};
                        dataUnder['title']='卷数';
                        dataUnder['field']='a'+tyid;
                        dataUnder['align']='center';
                        var dataUnder2={};
                        dataUnder2['title']='件数';
                        dataUnder2['field']='b'+tyid;
                        dataUnder2['align']='center';

                        data3.push(dataUnder);
                        data3.push(dataUnder2);
                    }
                    columns.push(data2);
                    columns.push(data3);

                    bootstraptableCountAction(columns);
                }
            }
        });
    }

    //创建表格
    function bootstraptableCountAction(columns){
        $table.bootstrapTable({
            url: '${basePath}/pcwindow/count/yearArchiverCount',//请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "desc",                   //排序方式
            //queryParams: queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 50,                       //每页的记录行数（*）
            pageList: [50, 100],        //可供选择的每页的行数（*）
            //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            //strictSearch: true,
           // showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            //showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showFooter: true,
            columns: columns,
            onLoadSuccess:function(data){
                addRow(data);
                //无数据隐藏分页
                if(data && data.total == 0){
                    $('.fixed-table-pagination').hide()
                }
            }
        });
        $table.bootstrapTable('resetView',{height:setHeight()});
    }

    /**
     * 添加合计行数据
     */
    function addRow(data){
        var rows = data.rows;

        var dataArr = {};
        //存放键名数组,和建立初始合计行,合计行所有数据设置为0
        var keynames = [];
        for(var keyname in rows[0]){
            keynames.push(keyname);
            dataArr[keyname]=0;
        }
        //获取合计数据
        //循环字段名
        for (var i = 0; i < keynames.length; i++) {
            var fieldName = keynames[i];
            //循环table数据组
            $.each(rows,function(index,value){
                //遍历table数据组中的每一项
                for(var key in value){
                    //如果键名一样和前面字段名中循环的字段名一样,进入
                    if(key === fieldName){
                        //如果字段名为年度,将字段名的值设置为"合计";
                        if(key ==="year"){
                            dataArr["year"]="合计";
                        }else {
                            //如果字段名不为年度,将字段名的值转为int类型和上次累加
                            dataArr[key]+= parseInt(value[key]);
                        }
                    }
                }
            })
        }
        $table.bootstrapTable('append', dataArr);
    }

    //按照年度查询
    function queryParamsCount(){
        var yearCountStart = $("#yearCountStart").val();
        var yearCountEnd = $("#yearCountEnd").val();
        var valSwitch = $("#switch").val();
        if(yearCountEnd<yearCountStart){
            confirmEvent('结束日期必须大于开始日期!');
        } else{
            if(valSwitch=='0'){
                var queryDate={
                    yearCountStart: yearCountStart,
                    yearCountEnd:yearCountEnd
                };
                var opt = {
                    url: '${basePath}/pcwindow/count/yearArchiverCount?yearCountStart='+yearCountStart+'&yearCountEnd='+yearCountEnd,
                    silent: true
                };
                $table.bootstrapTable('refreshOptions', opt);
            }else {
                echartsData(yearCountStart,yearCountEnd);
            }
        }
    }
//***********************************Echarts统计图**********************************************************
    function echartsData(yearCountStart,yearCountEnd){
        var queryDate={
            yearCountStart: yearCountStart,
            yearCountEnd:yearCountEnd
        };
        $.ajax({
            type: "POST",
            url:"${basePath}/pcwindow/count/yearCountECharts",
            dataType:"json",
            data:queryDate,
            async:false,
            success: function(data){
                if (data.length != 0) {
                    var vol = data[0].vol;
                    var item = data[0].item;
                    var type = data[0].type;

                    echartsVolAction(type,vol);
                    echartsItemAction(type,item);
                }
            }
        });
    }

    function echartsVolAction(typDataVol,dataVol){
        var myChart1 = echarts.init(document.getElementById('proporChartVolYearCount'), 'inno');
        myChart1.showLoading();
        var optionVolYearCount={
            title : {
                text: '各类型档案卷占比',
                subtext: '卷占比',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: typDataVol
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:dataVol,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart1.hideLoading();
        myChart1.setOption(optionVolYearCount);
    }
    function echartsItemAction(typDataItem,dataItem) {
        var myChart2 = echarts.init(document.getElementById('proporChartItemYearCount'), 'inno');
        myChart2.showLoading();
        var optionItemYearCount={
            title : {
                text: '各类型档案件占比',
                subtext: '件占比',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: typDataItem
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:dataItem,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        myChart2.hideLoading();
        myChart2.setOption(optionItemYearCount);
    }
    /**
     * 表格高度自适应
     * @return
     * winTop 浏览器视口高度
     * header 顶部通栏
     * breadcrumb 面包屑
     * mainFooter 底部
     */
    function setHeight(){
        var winTop = $(window.top).height(),
            header = window.top.document.querySelector('.main-header').offsetHeight,
            breadcrumb =  window.top.document.querySelector('.breadcrumb').offsetHeight,
            mainFooter = window.top.document.querySelector('.main-footer').offsetHeight;
        return winTop-header-breadcrumb-mainFooter-170;
    }
</script>
</body>
</html>

